*{
    padding: 0;
    margin: 0;
}

.box{
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: rgb(0,0,0);

        .item{
            width: 150px;
            height: 150px;
            transform: rotate(45deg);

            .anim{
                width: 150px;
                height: 150px;
                background-color: rgb(255,195,196);
                border-radius: 0 150px 0 150px;
                transition: all 2s;
                transform-origin: 150px 150px;
                position: absolute;
            }

            @list:0,30,60,90,-30,-60,-90;
            each( @list,{
                &:hover .item@{index}{
                    transform: rotate( @value+0deg );
                    background-color: rgb(223,168,177);
                    opacity: 0.9;
                }
            });
        }
}

    


